<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<meta name="theme-color" content="#ff9900">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flexbox-container">
	<div class="left" >
		<p>Hue 色调/色相</p>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
			<span class="Hue"></span>
		<p>Saturation 饱合度</p>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
			<span class="Saturation"></span>
		<p>Brightness 明亮度/明度/亮度</p>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			<span class="Brightness"></span>
			
		<br/><br/><br/>
		<img src="color.jpg " alt="颜色不平等">	
		<p>同一照明度下多种颜色的相对亮度不一（黄色的亮度几乎是蓝色的4倍）</p>
	</div>
	<div class="right">
	<div class="w">可读性的最佳组合是白底黑字</div>
	<div class="s">黑字白底的可读性也不错</div>
	<div class="g">白底上的明亮颜色像黄色会消失看不清</div>
	<div class="f">白底上的暗颜色像蓝色或红色</span>效果较佳</div>
	<div class="o">渐变背景极易制造可读性问题，是因为部份文字将因较弱的对比使可读性降低。若非用渐变背景不可，请使用黑色字，并不要在背景使用暗色</div>
	<div class="r">有些许红绿色盲的10%男性读者，会觉得此段落很难读，特别是红色和绿色的明亮度很接近的状况。不要在文本上单靠颜色来产生对比。</div>
	</div>
</div>
</body>
</html>
